<template>
  <div>
    <!-- 头部 -->
    <div class="w-header1">
      <div class="w-xhead1">
        <i @click="zhu()"></i>
        <span>我的神灯值</span>
        <div class="handle">
            <em class="el-icon-more-outline"></em>
        </div>
      </div>
    </div>
    <!-- 内容 -->
    <div class="main" >
        <div class="mainW">
            <!-- 头部 -->
            <div class="mainTbgc">
                <div class="head">
                    <i class="headwen">神灯规则</i>
                    <span></span>
                    <span>昵称</span>
                    <span>100<i></i></span>
                </div>
                <div class="headtop">
                    <ul>
                        <li v-for="a1 in aa" :key='a1'><p>{{a1.n}}</p><div><i>0</i>{{a1.t}}</div></li>
                    </ul>
                </div>
            </div>
            <!--主要内容  -->
                <div class="head-main">
                    <div class="headtext">
                        <div class="headw" v-for="(item,index) in arr1" :key="index" @click="deng(index)">
                            <i></i>
                            <span>{{item}}</span>
                            <i class="jian"></i>
                        </div>
                    </div>
                    <!-- 更喜欢 -->
                    <div class="hoby" > 
                        <div class="top">
                            <i></i>
                            <span>神灯值猜你喜欢</span>
                            <i></i>
                        </div>
                        <ul>
                            <li v-for="a2 in arr2" :key="a2">
                            <div > <i></i> </div>
                            <div class="one">
                                <span>{{a2.n2}}</span>
                                <span class="abgc">{{a2.m2}}<i></i></span>
                                <span>￥{{a2.t2}}</span>
                            </div>
                            </li>
                        </ul>
                    </div>
                </div>
        </div>
    </div>
    <!-- 组件改名称 -->
        <wbgc v-show="bolur1">
            <div class="w-tan1">
                <div class="tan">
                    <div>确定要清空所有足迹？</div>
                    <div>
                        <span class="btn1" @click="quxiao()">取消</span>
                        <span class="btn2" @click="qingkong()">确定</span>
                    </div>
                </div>
            </div>
        </wbgc>
  </div>
</template>

<script>
// 创建组件
import Ald from '../Ald.vue';
// import Dengyao from './Dengyao.vue';
export default {
    name:'FootMark',
    data(){
        return{
            bol:true,
            bolur1:false,
            bolur2:false,
            aa:[
                {
                    n:'今年购物抵钱已省',
                    t:'￥'
                }, {
                    n:'今年神灯值抵扣订单',
                    t:'笔'
                }
            ],
            arr1:['兑换记录','神灯值明细'],
            arr2:[
                {
                    n2:'蜗牛饰容BB霜50g',
                    m2:500,
                    t2:22.3
                },{
                    n2:'蜗牛饰容BB霜50g',
                    m2:500,
                    t2:22.3
                },{
                    n2:'蜗牛饰容BB霜50g',
                    m2:500,
                    t2:22.3
                },{
                    n2:'蜗牛饰容BB霜50g',
                    m2:500,
                    t2:22.3
                }
            ],
            arr:[  
                {
                    dat:'2017-07-03',
                    obj:[
                        {
                            tit:'焕彩萃璨花蕊唇彩4.8g',
                            zhi:'海外直邮',
                            money:166.06
                        }
                    ]
                
                }
                ,
                {

                    dat:'2017-07-03',
                    obj:[
                        {
                            tit:'焕彩萃璨花蕊唇彩4.8g',
                            zhi:'海外直邮',
                            money:166.06
                        },{
                            dat:'2017-07-03',
                            tit:'焕彩萃璨花蕊唇彩4.8g',
                            zhi:'海外直邮',
                            money:166.06
                        },{
                            dat:'2017-07-03',
                            tit:'焕彩萃璨花蕊唇彩4.8g',
                            zhi:'海外直邮',
                            money:166.06
                        }
                    ]
                
                }
                
            ]

        }
    },
    components:{
       'wbgc':Ald,
       
    },
    methods:{

        change(ind){
            console.log(ind);
            if(this.bol==false){
                this.bol='';
                this.bolur2=!this.bolur2;
            }
            
        },
        // 路由跳转
        deng(ind){
            if(ind==0){
            this.$router.replace('/dengjilu');
            }
            if(ind==1){
            this.$router.replace('/dengyao');
            }
        },
        dengjilu(){
            this.$router.replace('/dengjilu');
        },
        //回到主页
        zhu(){
         this.$router.replace('/login');
        },
        bianji(){
            this.bol=!this.bol;
        },
        qing(){
            this.bolur1=!this.bolur1;
        },
        qingkong(){
            this.qing();
            this.arr=[];
        },
        quxiao(){
            this.bolur1=!this.bolur1;
        }
        
    }
}
</script>

<style scoped>
/*  */
.head-main{
    position: relative;
    top: 32rem;
    z-index:2;
}
.headtext{
    position: relative;
    top: 0;
}
.headtext .headw{
    width: calc(1005 - 4rem);
    padding: 0 2rem 0 7rem;
    height: 8rem;
    line-height: 8rem;
    border-bottom: #4c4c4c 0.1rem solid;
    background-color: #fff;
    position: relative;
    text-align: left;
}
.headtext div span{
    text-align: left;
}
.headtext div i {
    position: absolute;
    top: 50%;
    transform: translateY(-1.6rem);
    display: inline-block;
    height: 3.3rem;
}
.headtext div .jian {
    text-align: right;
    width: 1rem;
    background: url(../../assets/user/user-yjian.png) no-repeat 0 0;
    right: 2rem;
}
.headtext div:nth-child(1) i:nth-child(1) {
    left: 2rem;
    background: url(../../assets/user/user-text.png) no-repeat 0 0;
    width: 3.2rem;
}
.headtext div:nth-child(2) i:nth-child(1) {
    left: 2rem;
    background: url(../../assets/user/user-den2.png) no-repeat 0 0;
    width: 4.1rem;
}
/* 更喜欢 */
/*  */
.hoby .top{
    width: calc(100% - 16rem);
    padding: 0 8rem;
    height: 10rem;
    line-height: 10rem;
    background-color: #f2f2f2;
    font-size: 3rem;
    color: #808080;
    position: relative;
}
.hoby .top i{
    width: 15rem;
    height: 0.2rem;
    position: absolute;
    top:calc(50% - 0.1rem);
}
.hoby .top i:nth-of-type(1){
    height: 0.2rem;
    background-color: #ccc;
    left: 8rem;
}
.hoby .top i:nth-of-type(2){
    height: 0.2rem;
    background-color: #ccc;
    right: 8rem;
}
      .hoby ul {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;
      }
      .hoby ul li {
        float: left;
        list-style: none;
        border: 0.1rem solid #ccc;
        /* border-radius: 0.6rem; */
        background-color: #fff;
        height: 40.8rem;
        width: 32.8rem;
        width: calc(50% - 3rem);
        font-size: 0;
        margin-bottom: 2rem;
      }
      .hoby ul li div:nth-child(1) {
        height: 26.2rem;
        border-bottom: 0.1rem solid #ccc;
        background-color: #fff;
        /* background: url(../../assets/user/g-bbs.png) no-repeat 0 5.5rem; */
        position: relative;
      }
      .hoby ul li div:nth-child(1) i{
          height: 15.2rem;
          width: 6.4rem;
          position: absolute;
          top: calc(50% - 5.5rem);
          left: calc(50% - 3.4rem);
          background: url(../../assets/user/g-bbs.png) no-repeat 0 0;

      }
      .hoby ul li div:nth-child(2) {
        height: 14.5rem;
        border-bottom: 0.1rem solid #ccc;
        background-color: #ffffff;
      }
      .hoby .one {
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: space-evenly;
      }
      .hoby .one span:nth-child(1) {
        color: #4c4c4c;
        font-size: 2.4rem;
      }
      .hoby .one span:nth-child(2) {
        color: #e53e42;
        font-size: 2.4rem;
        position: relative;
      }
       .hoby .abgc i{
           display: inline-block;
           height: 1.6rem;
           width: 2.4rem;
           position: relative;
           background: url(../../assets/user/user-deng.png) no-repeat 0 0;

           /* position: absolute; */


      }
      .hoby .one span:nth-child(3) {
        color: #808080;
        font-size: 2.2rem;
        text-decoration: line-through;
      }
/* 内容 */
.main{
    margin-top: 9.6rem;
    font-size: 3rem;
}
.mainW {
    width: 100%;
    position: relative;
}
.mainTbgc{
    position: fixed;
    top: 9.6rem;
    left: 0;
    height: 32rem;
    width: 100%;
    background: url(../../assets/user/user-bgc.png) no-repeat 0 0;
    background-size: 100% 100%;
    z-index: 4;
}
.head{
    width: calc(100% - 4rem);
    margin: 0 2rem;
    padding-top: 1.5rem;
    position: relative;
    /* outline: 1px solid #fff; */
}
.head span{
    text-align: center;
    display: block;
}
.head i.headwen{
    position: absolute;
    top: 1.5rem;
    right: 0;
    font-size: 2.4rem;
    text-align: right;
    color: #fff;
    padding-left: 4rem;
    background: url(../../assets/user/user-deng2.png) no-repeat 0 0;
}
.head span:nth-of-type(1){
    position: relative;
    left: 50%;
    transform: translateX(-5rem);
    height: 10rem;
    width: 10rem;
    border-radius: 100%;
    background-color: #fff;
    margin-bottom: 1rem;
}
.head span:nth-of-type(2){
    color: #fff;
    font-size: 2.4rem;
    margin-bottom: 1.4rem;
}
.head span:nth-of-type(3){
    color: #ffd21f;
    font-size: 4.2rem;
    position: relative;
}
.head span:nth-of-type(3) i{
    position: absolute;
    right: 26.8rem;
    top: 2.6rem;
    width: 3rem;
    height: 3rem;
    background: url(../../assets/user/user-deng.png) no-repeat 0 0;
}
.headtop{
    width: 100%;
    height: 8rem;
    position: absolute;;
    bottom: 0;
}
.headtop ul{
    display: flex;
    height: 6rem;
    margin-top: 1rem;
    /* color: #fff; */
}
.headtop ul li{
    flex: 1;
}
.headtop ul li:nth-of-type(1){
    border-right:0.1rem solid #f6c6c6 ;
}

.headtop ul li p{
    color: #f6c6c6;
font-size: 2.4rem;
}
.headtop ul li div{
    color: #fff;
    font-size: 2.4rem;
}
.headtop ul li div i{
    font-size: 3rem;
}
/* 遮罩 */
.w-tan1{
    width: calc(100% - 32rem);
    padding: 0 16rem;

}
.tan{
    width: calc(100% - 32rem);
    height: 25rem;
    background-color: #fff;
    text-align: center;
    position: absolute;
    top: 50%;
    transform: translateY(-12.5rem);
    z-index: 11;
}
.tan div:nth-child(1) {
   width:100%;
   height: 16.9rem;
   line-height: 16.9rem;
   color: #4c4c4c;
   font-size: 3rem;
}
.tan div:nth-child(2) {
    line-height: 8rem;
    height: 8rem;
    width: 100%;
    display: flex;
    border: 0.1rem solid #cccc;
    font-size: 2.8rem;
}
.tan div:nth-child(2) span{
    flex:1;
}
.tan div:nth-child(2) span:nth-child(1){
    border-right: 0.1rem solid #cccccc;
}
.btn1{
    color: #4c4c4c;
}
.btn2{
    color: #e53e42;
}

/* 头部 */
.handle{
    width: 4rem;
    height: 9.6rem;
    position: absolute;
    top: 0;
    right: 2rem;
    font-size: 3rem;
}
.handle em{
    display: inline-block;
    height: 2.8rem;
    /* margin: 0 0.7rem; */
    position: relative;
    top: 0.2rem;
}
</style>